<template>
    <div class="structure">
        <LeaderLineLabelPage />

        <StructureDrawer />
        <StructureListView />

        <div audio :style="divAudioStyle" v-show="StructureComponent.Default.Description.value != ''">
            <span :style="descriptionStyle">
                {{
                        StructureComponent.Default.Description.value
                }}
            </span>
            <!-- <img src="/static/InertialNavigation/icon-foldout.png" alt="音频" title="" @click="OnSwitch"> -->
        </div>

        <Speak hidden :stats="StructureComponent.Default.AudioStats"
            v-show="StructureComponent.Default.Description.value != '' && StructureComponent.Default.DescriptionAudioAccessibility.value">
            {{ StructureComponent.Default.Description.value }}
        </Speak>

        <LidarNav />

        <LidarHeader />
    </div>
</template>

<script setup lang="ts">
import Speak from '@components/TTS/Speak.vue';
import { computed, ComputedRef, onMounted, onUnmounted, reactive, ref, StyleValue } from 'vue';
import LeaderLineLabelPage from './LeaderLineLabelPage.vue';
import { StructureComponent } from './InertialNavigationComponent';
import LidarHeader from './InertialNavigationHeader.vue';
import LidarNav from './InertialNavigationNav.vue';
import StructureDrawer from './StructureDrawer.vue';
import StructureListView from './StructureListView.vue';



function OnSwitch(): void {
    StructureComponent.Default.DescriptionAudioAccessibility.value = !StructureComponent.Default.DescriptionAudioAccessibility.value;
    StructureComponent.Default.AudioStats.pausable = !StructureComponent.Default.AudioStats.pausable;
}

const divAudioStyle: ComputedRef<StyleValue> = computed(
    () => {
        return {
            backgroundColor: StructureComponent.Default.DescriptionAudioAccessibility.value ? '#131620' : 'transparent',
        } as StyleValue;
    }
);

const descriptionStyle: ComputedRef<StyleValue> = computed(
    () => {
        return {
            visibility: StructureComponent.Default.DescriptionAudioAccessibility.value ? 'visible' : 'hidden',
        } as StyleValue;
    }
);

onMounted(() => StructureComponent.Default.Awake());
onUnmounted(() => StructureComponent.Default.Destroy());
</script>

<style scoped>
.structure {
    background-color: transparent;
}

div[audio] {
    position: absolute;
    top: 14.4rem;
    left: 50%;

    transform: translateX(-50%);

    max-width: 100rem;

    padding: 3rem 4rem;

    background-color: #131620;
    border-radius: 2rem;
}

div[audio]>span {
    color: #BEBEFF;
    font-size: 1.8rem;
    font-weight: 500;

    text-indent: 2em;
}

div[audio]>img {
    width: 3rem;
    height: 3rem;

    position: absolute;
    top: 1rem;
    right: 1rem;

    border-radius: 50%;
    background-color: #131620;

    pointer-events: auto;
}
</style>